<template>
  <div class="app-container">
    <el-card>
      <el-button
        @click="addType"
        type="primary"
        icon="el-icon-plus"
        size="small"
        >新增潜在类型</el-button
      >
      <el-dialog
        width="600px"
        :visible.sync="dialogVisible"
        title="新增潜在类型"
      >
        <el-form
          size="small"
          :model="detailForm"
          label-width="100px"
          ref="detailForm"
        >
          <el-form-item label="类型名称" prop="name">
            <el-input v-model="detailForm.name"
          /></el-form-item>
          <el-form-item>
            <el-button
              style="width: 100px"
              type="primary"
              @click="onsubmit('detailForm')"
              >确定</el-button
            >
            <el-button style="width: 100px" @click="handleClose"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "tagCate",
  data() {
    return {
      dialogVisible: false,
      detailForm: {
        name: ""
      }
      // type: null
    };
  },
  created() {
    // if (this.$route.query.type) {
    //   this.type = this.$route.query.type;
    // }
  },
  methods: {
    handleClose() {},
    addType() {
      this.dialogVisible = true;
    },
    onsubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.detailForm);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
